<template>
    <div>
        <el-dialog title='' :visible.sync="isShow" @close="onClose" width="70%">
            <div class="common-view">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="方案审核" name="first" v-if="false">
                        <div class="top-view">
                            <el-table :data="tableData" border style="width: 100%; margin-top: 10px"
                                      :span-method="objectSpanMethod" :header-cell-style="headClass"
                                      :cell-style="rowClass">
                                <el-table-column prop="id" label="小版块" width="180">
                                </el-table-column>
                                <el-table-column prop="name" label="标签">
                                </el-table-column>
                                <el-table-column prop="amount1" label="标签">
                                </el-table-column>
                                <el-table-column prop="amount2" label="优先级">
                                </el-table-column>
                                <el-table-column prop="amount3" label="类别">
                                </el-table-column>
                                <el-table-column label="操作">
                                    <template slot-scope="scope">
                                        <span>删除</span>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div class="bottom-view">
                            <div class="bottom-div-view">
                                <div class="btn-view btn-view-blue">
                                    通过
                                </div>
                                <div class="btn-view btn-view-red">
                                    拒绝
                                </div>
                                <div class="btn-view btn-view-border-red">
                                    取消
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="康复计划" name="first">
                        <div class="sec-view">
                            <el-input
                                    type="textarea"
                                    placeholder="请输入内容"
                                    v-model="textarea2">
                            </el-input>

                        </div>
                        <div class="bottom-view" v-if="isBtnShow && planId">
                            <div class="bottom-div-view">
                                <div class="btn-view btn-view-blue" @click="commonMessage(1,'一键审核通过')">
                                    一键审核通过
                                </div>
                                <div class="btn-view btn-view-blue" @click="commonMessage(2,'给家长发送')">
                                    发送家长
                                </div>
                                <div class="btn-view btn-view-blue" @click="commonMessage(3,'保存修改')">
                                    保存修改
                                </div>
                                <div class="btn-view btn-view-blue" @click="commonMessage(4,'通过')">
                                    通过
                                </div>
                                <div class="btn-view btn-view-red" @click="commonMessage(5,'拒绝')">
                                    拒绝
                                </div>
                                <div class="btn-view btn-view-border-red" @click="onClose">
                                    取消
                                </div>
                            </div>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getStudentPlan,studentPlanAllPass,studentPlanPass,studentPlanRefuse,sendPlan,editPlaById} from '@/api/student.js'
    export default {
        props: ['isShowDialog','selectStudentId'],
        data() {
            return {
                isBtnShow:false,
                planId:'',
                studentId:this.selectStudentId,
                textarea2:'',
                tableData: [],
                activeName: 'first',
                headerUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,

            }
        },
        watch: {
            selectStudentId:{
                handler(newValue, oldValue) {
                    this.studentId = newValue;
                },
                deep: true
            }
        },
        created() {
            let roleList = JSON.parse(localStorage.getItem("roleList"))
            let item = roleList.find(item=>item.roleKey === 'view_cdpf')
            if (item){
                this.isBtnShow = false
            }else{
                this.isBtnShow = true
            }
            this.getStudentPlan();
        },
        computed: {},
        methods: {
            //点击拒绝按钮
            refuseBtn(){
                studentPlanRefuse({
                    planId:this.planId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.onClose();
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            //点击通过
            passBtn(){
                studentPlanPass({
                    planId:this.planId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.onClose();
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            //点击保存修改
            saveUpdate(){
                let dataForm = {
                    planId:this.planId,
                    rehabilitationPlan:this.textarea2
                }

                console.log(dataForm);
                editPlaById(dataForm).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.onClose();
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            //点击发送家长
            sendParents(){
                sendPlan({
                    planId:this.planId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.onClose();
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            //点击一键审核通过
            oneTouchPass(){
                studentPlanAllPass({
                    planId:this.planId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.onClose();
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            commonMessage(flag,message){
                if (!this.planId){
                    this.$message({
                        type: 'info',
                        message: '暂时未有康复计划,请先填写!'
                    });
                    return;
                }
                this.$confirm('是否'+ message +'该康复计划?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    switch (flag) {
                        case 1:
                            //一键审核通过
                            this.oneTouchPass();
                            break;
                        case 2:
                            //发送家长
                            this.sendParents();
                            break;
                        case 3:
                            //保存修改
                            this.saveUpdate();
                            break;
                        case 4:
                            //通过
                            this.passBtn();
                            break;
                        case 5:
                            //拒绝
                            this.refuseBtn();
                            break;
                        default:
                            break
                    }
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });

            },
            //获取当前康复计划
            getStudentPlan(){
                getStudentPlan({
                    studentId:this.selectStudentId
                }).then((res) => {
                    console.log(res)
                    if (res.code == 200){
                        this.textarea2 = res.data.rehabilitation_plan
                        this.planId = res.data.plan_id
                    }
                });
            },
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 0) {
                    // 第 4、5、6、7 行（索引从 0 开始，对应索引 3、4、5、6）进行合并
                    if (rowIndex >= 2 && rowIndex < 7) {
                        if (rowIndex === 2) {
                            // 第 4 行显示，合并 4 行
                            return [4, 1];
                        } else {
                            // 第 5、6、7 行隐藏
                            return [0, 0];
                        }
                    }
                }
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeLessonPlan')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:7px;background: #ededed;";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:7px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(70vh);
        border-radius: 10px;
        padding: 10px 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .top-view {
            height: calc(70vh - 100px);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .sec-view{
            height: calc(70vh - 110px);
            border: 1px solid #dcdcdc;
            border-radius: 15px;
            margin-top: 15px;
            padding: 5px;
        }
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        -webkit-transform: none;
        transform: none;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    /deep/ .el-dialog__header {
        padding: 0 !important;
    }

    //隐藏指定 el-table 的水平滚动条
    /*.hide-scrollbar /deep/ .el-table__body-wrapper::-webkit-scrollbar {*/
    /*    width: 0 !important;*/
    /*    height: 0 !important;*/
    /*    background-color: transparent;*/
    /*}*/

    /*.hide-scrollbar /deep/ .el-table th.gutter, .el-table td.gutter {*/
    /*    width: 0px !important;*/
    /*    border-right-width: 0;*/
    /*    border-bottom-width: 0;*/
    /*    padding: 0;*/
    /*}*/

    /deep/ .el-dialog__body {
        padding: 2% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    /deep/ .el-button--medium.is-round {
        padding: 0.08rem 0.2rem;
        font-size: 0.11rem;
        border-radius: 0.2rem;
    }

    /deep/ .el-tabs__header {
        padding: 0;
        position: relative;
        margin: 0;
    }

    /deep/ .el-tabs__nav-scroll {
        margin-right: 50px;
    }

    .bottom-view {
        height: 80px;
        line-height: 80px;
        align-items: center;
        display: flex;
        flex-direction: row-reverse;
        justify-content: space-between;

        .bottom-div-view {
            display: flex;
            flex-direction: row;

            .btn-view {
                height: 35px;
                line-height: 35px;
                color: white;
                text-align: center;
                padding: 0 18px;
                border-radius: 5px;
                margin-right: 15px;
                font-size: 0.09rem;
            }

            .btn-view-blue {
                background: #0A77F9;
            }

            .btn-view-red {
                background: #ff0000;
            }

            .btn-view-border-red {
                border: 1px solid #0A77F9;
                color: #0A77F9;
            }
        }
    }

    /deep/ .el-textarea__inner {
        height: calc(70vh - 130px);
        display: block;
        resize: vertical;
        /* padding: 0.02604rem 0.07813rem; */
        line-height: 1.5;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        width: 100%;
        font-size: inherit;
        color: #606266;
         background-color: #fff;
         background-image: none;
         border: 0px solid #DCDFE6 !important;
         border-radius: 0.02083rem;
        -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    }
</style>

